<!DOCTYPE html>
<html>
<head>
	<title>我的账单</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- head 中 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

<!-- body 最后 -->
<!--<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>-->
	<script src="/static/js/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>


<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
	<script src="/static/js/template.js"></script>

<link href="/static/weixin/css/zhangdan.css" rel="stylesheet" type="text/css" />
</head>


<body>

<div class="weui-tab">
  	 <div class="weui-navbar  center_navbar">
    <a class="weui-navbar__item weui-bar__item--on" href="#tab1"  id="alljq">
      全部
      <div class="weui-cell__ft">
		    </div>
    </a>
 
    <a class="weui-navbar__item open-popup"   id="selectQT"  href="javascript:;"    data-target="#cart" >
      选项
      <div class="weui-cell__ft">
		    </div>
    </a>
    <a class="weui-navbar__item" href="#tab1" id="seletSort">
      排序
      <div class="weui-cell__ft">
		    </div>
    </a>
  </div>

 <div class="weui-tab__bd center_jq">
    <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active w">

      	<div class="weui-cells center_w" id="zhangdan_list_id">
	<!--	<a class="weui-cell weui-cell_access" href="javascript:;" onclick="btnDetil(this)">
		    <div class="weui-cell__bd lie">

		    	<div class="center_d">
		    		<div class="one">
		    			<div class="data_time">
		    				<span>2018年1月</span>
		    				
		    			</div>

		    			<div class="data_ma">
		    				<span class="data_shou">收 ￥1000.00</span>
		    				<span class="data_fu">付 ￥10000.00</span>
		    			</div>

		    		</div>
		    		<div class="data_ma">
		    			<span class="data_show">-￥22222</span>
		    		</div>
		    	</div>
		     
		    </div>
		    <div class="weui-cell__ft">
		    </div>
		  </a>

		<div>

		    <a class="weui-cell_access detil_center" href="javascript:;">
		    <div class="weui-cell__bd detil">
		    		<div class="detil_first">

		    			<span class="detil_type">房租2121</span>
						<span class="detil_state">待支付</span>
						<span class="detil_ms">￥300</span>
		    		</div>
		    		<div class="detil_middle">
		    				<span class="detil_adress">东关203 401室</span>
		    		</div>
		    		<div class="detil_date_time">
						<span class="detil_to_time">2017-12-01至2018-12-31</span>		 <span class="fbtn">付款</span>    			
		    		</div>
		     
		    </div>		
		   
		  </a>


			</div>-->
		</div>

    </div>
  </div>

  <div class="weui-tabbar bottom_jq">
    <a href="javascript:;" class="weui-tabbar__item weui-bar__item--on">
      <div class="weui-tabbar__icon">
        <img src="/static/weixin/images/zhang.png" alt="">
      </div>
      <p class="weui-tabbar__label">账单</p>
    </a>
    <a href="javascript:;" class="weui-tabbar__item weui-bar__item--on" >
      <div class="weui-tabbar__icon">
        <img src="/static/weixin/images/shang.png" alt="">
      </div>
      <p class="weui-tabbar__label">商城</p>
    </a>
    <a href="javascript:;" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="/static/weixin/images/myd.png" alt="">
      </div>
      <p class="weui-tabbar__label">我的</p>
    </a>
  </div>
</div>


    <div id="cart" class='weui-popup__container popup-bottom'>
      <!-- <div class="weui-popup__overlay"></div> -->
      <div class="weui-popup__modal"  style="height:50%">
       <!--  <div class="toolbar">
          <div class="toolbar-inner">
            <a href="javascript:;" class="picker-button close-popup">关闭</a>
            <h1 class="title">请选择</h1>
          </div>
        </div> -->
        <div class="modal-content">
          <div class="weui-cells content_cells">
                
                 
				 <div  class="content_w" >
		          		<div class="content_time">
		          			<span class="content_time_tital">日期范围</span>
		          			<span class="content_time_input"><input type="text" id='datetime-picker'/><input type="text" id='datetime-picker2'/></span>

		          		</div>
		          		<div class="content_mo">
		          			<span class="content_tital">价格(单选)</span>
		          			<div  class="content_qy">
		          			<span  style="background-color: #0095FF;color: #FFFFFF" class="spanSelect">不限</span>	<span class="spanSelect">2000</span>	<span class="spanSelect">30000</span>	
		          			<span class="spanSelect">30000</span>	
		          			<span class="spanSelect">30000</span>	
		          			</div>
		          			
		          		</div>
		          		<div class="content_type">
		          			<span class="content_tital">类别(单选)</span>
							<div  class="content_type_fang">
		          			<span  style="background-color: #0095FF;color: #FFFFFF" class="typeSelect">不限</span>	<span class="typeSelect">2000</span>	<span class="typeSelect">30000</span>	
		          			
		          			<span class="typeSelect">不限</span>	<span class="typeSelect">房租</span>	<span class="typeSelect">押金</span>
		          			</div>

		          		</div>
						<div class="content_button">
		          			<a href="javascript:;" class="weui-btn content_btn weui-btn_primary picker-button close-popup">按钮</a>
		          		</div>
         		 </div>
          
          </div>
        </div>
      </div>
    </div>


</body>

<script src="/static/weixin/js/fastclick.js"></script>
<script>
  $(function() {

    FastClick.attach(document.body);
     
  });


   
</script>

 

<script type="text/javascript">




$("#alljq").select({
  title: "选择账单状态",

  items: [
    {
      title: "待支付",
      value: "001",
    },
    {
      title: "已逾期",
      value: "002",
    },
    {
      title: "已支付",
      value: "003",
    },
   
    {
      title: "全部",
      value: "009"
    }
  ]
});

$("#seletSort").select({
  title: "我的账单排序",
  items: [
    {
      title: "金额 →低",
      value: "001",
    },
    {
      title: "金额 低→高",
      value: "002",
    },
    {
      title: "日期 远→近",
      value: "003",
    },
    {
      title: "日期 近→远",
      value: "004",
    }
  ]
});



</script>
<script type="text/javascript">
    $(".now_time_context").click(function(){
        window.location.href="/weixin/wuye_fukuan.do?a=a";
    });
</script>



<script>

    $(function () {
        var lastId="";
		//绑定时间
        $("#datetime-picker").datetimePicker();
        $("#datetime-picker2").datetimePicker();

        //价格单选按钮样式
        $(".spanSelect").click(function(){
            $(".spanSelect").css("background-color","#FFFFFF").css("color","#999999");
            $(this).css("background-color","#0095FF").css("color","#FFFFFF");
        });

		//类别单选按钮样式
        $(".typeSelect").click(function(){
            $(".typeSelect").css("background-color","#FFFFFF").css("color","#999999");
            $(this).css("background-color","#0095FF").css("color","#FFFFFF");
        });

        //账单 年月集合
         weizinList();

	});

    //账单 每月统计
		function weizinList(){
			var url = "/weixin/weizinList.do";
			$.ajax({
				url: url,
				dataType: "json",
				async: false,
				success: function (data) {
					var transporTypesLevel = template("zhangdanList-template", {"data": data});
					$("#zhangdan_list_id").html(transporTypesLevel);
				}
			});
		}
		// 点击每个年月 账单 去查询 当月数据集合
		function btnDetil(the){
		    var yuetimeVal = $(the).attr("data-time");
            var daydateVal = $(the).next().attr("data-time-date");
            $(".zhangdan_day_class").html("");

            var url = "/weixin/weizinDayList.do";
            var params={
               "START_DATE": yuetimeVal
			}
            $.ajax({
                url: url,
                dataType: "json",
                data:params,
                async: false,
                success: function (data) {
                    	var val = template("zhangdanList-day-template", {"data": data});
         			 	 $("#data-time"+daydateVal).html(val);
                   		//$("#data-time"+daydateVal).toggle();
                },
            });

			$(".weui-cell__fft:after").css("border-width","2px 2px 0 0");
			$(the).find(".weui-cell__ft").attr("class", "weui-cell__ftt");
		}

		function findByDetil(the){
            var zhangId = $(the).attr("data-zhangId");
            window.location.href="/weixin/wuye_fukuan.do?zhangId="+zhangId;

		}
</script>

<!-- 账单 集合  每月统计-->
<script type="text/html" id="zhangdanList-template">
	{{each data.list as pd index}}

	<a class="weui-cell weui-cell_access" href="javascript:;" onclick="btnDetil(this)" data-time="{{pd.TITLE_TIME}}">
		<div class="weui-cell__bd lie">

			<div class="center_d">
				<div class="one">
					<div class="data_time">
						<span>{{pd.TITLE_TIME}}</span>

					</div>

					<div class="data_ma">
						<span class="data_shou">收 ￥{{pd.SHOU_TOTAL_PRICE}}</span>
						<span class="data_fu">付 ￥{{pd.FU_TOTAL_PRICE}}</span>
					</div>

				</div>
				<div class="data_ma">
					<span class="data_show">-￥{{pd.TOTAL_PRICE}}</span>
				</div>
			</div>

		</div>
		<div class="weui-cell__ft">
		</div>
	</a>
	<div  data-time-date="{{pd.TITLE_TIME}}" id="data-time{{pd.TITLE_TIME}}" data-flag="false" class="zhangdan_day_class"></div>
	{{/each}}
</script>
<!--所有账单集合  每日的-->
<script type="text/html" id="zhangdanList-day-template">
	{{each data.list as pd index}}

	<a class="weui-cell_access" href="javascript:;"  >
		<div class="weui-cell__bd detil">
			<div class="detil_first">
				<!--<span class="detil_time">20号</span>-->
				<span class="detil_type">{{pd.BILL_NAME}}</span>
				<span class="detil_state"
					  {{if pd.STATE =="682177ade393478e8224f9a3aa385a6c"}} style="border: 0.5pt solid #FF5F00;color: #FF5F00;"{{/if}}
					  {{if pd.STATE =="eda58d7280554dd9918207d27e2d4654"}} style="border: 0.5pt solid #13de93;color: #13de93;"{{/if}}
					  {{if pd.STATE =="7092004518204020890a2b2141e94368"}}style="border: 0.5pt solid #ecc80a;color: #ecc80a;"{{/if}}
					  {{if pd.STATE =="e3209790dbfa452b967d24c73ea46547"}}style="border: 0.5pt solid #800358;color: #800358;"{{/if}}
				>
					{{if pd.STATE =="682177ade393478e8224f9a3aa385a6c"}}待支付{{/if}}
					{{if pd.STATE =="eda58d7280554dd9918207d27e2d4654"}}已支付{{/if}}
					{{if pd.STATE =="7092004518204020890a2b2141e94368"}}逾期{{/if}}
					{{if pd.STATE =="e3209790dbfa452b967d24c73ea46547"}}待抄表{{/if}} </span>
				<span class="detil_ms">￥{{pd.TOTAL_PRICE}}</span>
			</div>
			<div class="detil_middle">
				<span class="detil_adress">{{pd.BUSINESS_NAME}} {{pd.ROOM_NUM}}</span>
			</div>
			<div class="detil_date_time">
				<span class="detil_to_time">{{pd.START_DATE}} 至{{pd.END_DATE}} </span>		 <span class="fbtn"  onclick="findByDetil(this)" data-zhangId="{{pd.ID}}"	{{if pd.STATE =="eda58d7280554dd9918207d27e2d4654"}} style="display: none;" {{/if}}>付款</span>
			</div>
		</div>
	</a>
	{{/each}}
</script>
</html>